<template>
  <div class="main-sections">
    <q-splitter v-model="splitterModel" style="height: 100%" color="primary">
      <template v-slot:after>
        <q-tab-panels
          v-model="tab"
          animated
          swipeable
          vertical
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="SingleStepTest">
            <SingleStepTest />
          </q-tab-panel>
          <q-tab-panel name="ConnectTesting">
            <ConnectTesting />
          </q-tab-panel>
          <q-tab-panel name="DownloadPath">
            <DownloadPath />
          </q-tab-panel>
          <q-tab-panel name="ParameterSetting">
            <ParameterSetting />
          </q-tab-panel>
        </q-tab-panels>
      </template>
    </q-splitter>
  </div>
</template>

<script>
import { ref } from "vue";
import SingleStepTest from "./MainSection/SingleStepTest.vue";
import ConnectTesting from "./MainSection/ConnectTesting.vue";
import DownloadPath from "./MainSection/DownloadPath.vue";
import ParameterSetting from "./MainSection/ParameterSetting.vue";
export default {
  name: "MainSection",
  components: {
    SingleStepTest,
    ConnectTesting,
    DownloadPath,
    ParameterSetting,
  },
  setup() {
    return {
      tab: ref("SingleStepTest"),
      splitterModel: ref(20),
    };
  },
};
</script>
<style>
.q-splitter--vertical > .q-splitter__panel {
  width: 150px !important;
}
</style>
<style lang="scss" scoped>
.main-sections {
  height: 100%;
}
</style>
